<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>注册</title>
        <link rel="stylesheet" type="text/css" href="css/common.css">
        <link rel="stylesheet" href="css/register.css">
		<!--导入jquery-->
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			function checkUsername() {
				var username = $("#username").val();
				var reg_username=/^\w{8,20}/;
				var test1 = reg_username.test(username);
				if (test1){
					$("#username").css("border","")
				}else {
					$("#username").css("border","1px solid red")
				}
				return test1;
			}




			function checkPassword() {
				var password = $("#password").val();
				var reg_password=/^\w{8,20}/;
				var test1 = reg_password.test(password);
				if (test1){
					$("#password").css("border","")
				}else {
					$("#password").css("border","1px solid red")
				}
				return test1;
			}
			function checkEmail(){
				var email = $("#email").val();
				var test=/^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,} $/
				var test1 = test.test(email);
				if (test1){
					$("#email").css("border","")
				}else {
					$("#email").css("border","1px solid red")
				}
				return test1;
			}
			function checkName(){
				var name = $("#name").val();
				var flag=false;
				if (name==""){
					$("#name").css("border","1px solid red")
				}else {
					$("#name").css("border","")
					flag=true;
				}
				return flag;
			}
			function checkTelephone(){
				var telePhone = $("#telephone").val();
				var reg_TelePhone=/^[0-9]{11}$/;
				var test = reg_TelePhone.test(telePhone);
				if (test){
					$("#telephone").css("border","")
				}else {

					$("#telephone").css("border","1px solid red")
				}
				return test;
			}
			function checkDate(){
				var birthday = $("#birthday").val();
				var flag=false;
				if (birthday==""){
					$("#birthday").css("border","1px solid red")
				}else {
					$("#birthday").css("border","")
					flag=true;
				}
				return flag;
			}
			$(function () {
				$("#registerForm").submit(function () {
					if (checkUsername()&&checkPassword()&&checkName()&&checkTelephone()&&checkDate()){
						$.post("user/regist",$(this).serialize(),function (data) {
								if (data.flag){
									location.href="register_ok.html";
								}else {
									$("#error-msg").html(data.errorMsg)
								}
						})
					}
						return false;
				})
				$("#username").blur(function () {
						checkUsername()
				})
				$("#password").blur(function () {
					checkPassword()
				})
				$("#email").blur(function () {
					//checkEmail()
				})
				$("#name").blur(function () {
					checkName()
				})
				$("#telephone").blur(function () {
						checkTelephone()
				})
				$("#birthday").blur(function () {
						checkDate()
				})
			})
		</script>
    </head>
	<body>
	<!--引入头部-->
	<div id="header"></div>
        <!-- 头部 end -->
    	<div class="rg_layout">
    		<div class="rg_form clearfix">
    			<div class="rg_form_left">
    				<p>新用户注册</p>
    				<p>USER REGISTER</p>
    			</div>
    			<div class="rg_form_center">
					<div id="error-msg" style="color:red;text-align: center"></div>
					<!--注册表单-->
    				<form id="registerForm" >
						<!--提交处理请求的标识符-->
						<input type="hidden" name="action" value="register">
    					<table style="margin-top: 25px;">
    						<tr>
    							<td class="td_left">
    								<label for="username">用户名</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="username" name="username" placeholder="请输入8-20位字符">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="password">密码</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="password" name="password" placeholder="请输入8-20位字符">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="email">Email</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="email" name="email" placeholder="请输入正确的Email">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="name">姓名</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="name" name="name" placeholder="请输入真实姓名">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="telephone">手机号</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="telephone" name="telephone" placeholder="请输入正确的手机号">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="sex">性别</label>
    							</td>
    							<td class="td_right gender">
    								<input type="radio" id="sex" name="sex" value="男" checked> 男
    								<input type="radio" name="sex" value="女"> 女
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="birthday">出生日期</label>
    							</td>
    							<td class="td_right">
    								<input type="date" id="birthday" name="birthday" placeholder="年/月/日">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="check">验证码</label>
    							</td>
    							<td class="td_right check">
    								<input type="text" id="check" name="check" class="check">
										<span style="width: 60px"><input type="button" id="yzm_btn"  style="height: 30px;" value="点击获取验证码"></span>
									<script type="text/javascript">
										$(function () {
											$("#yzm_btn").on('click',()=>{

												$("#yzm_btn").addClass("not_btn");
												$("#yzm_btn").attr("disabled",true);

												console.log(123);
												var i = 60;
												var timer =  setInterval(()=>{

													$("#yzm_btn").val(i);
													i--;
													if(i==-1){
														$("#yzm_btn").removeClass("not_btn");
														$("#yzm_btn").attr("disabled",false);
														$("#yzm_btn").val("点击获取验证码");
														clearInterval(timer);
													}
												},1000);
												var telephone= $("#telephone").val();
												if (checkTelephone()){
													$.get("user/checkWord1",{"telephone":telephone},function (data) {
														//alert(data.errorMsg);
													})
												}

											})
										})
									</script>
    							</td>

    						</tr>

    						<tr>
    							<td class="td_left"> 
    							</td>
    							<td class="td_right check"> 
    								<input type="submit" class="submit" value="注册">
									<span id="msg" style="color: red;"></span>
    							</td>
    						</tr>
    					</table>
    				</form>
    			</div>
    			<div class="rg_form_right">
    				<p>
    					已有账号？
    					<a href="login.html">立即登录</a>
    				</p>
    			</div>
    		</div>
    	</div>
        <!--引入尾部-->
    	<div id="footer"></div>
		<!--导入布局js，共享header和footer-->
		<script type="text/javascript" src="js/include.js"></script>
    	
    </body>
</html>